<template>
  <div>
    <div class="p-title">{{ nav.YourAddress }}</div>

    <div class="s-tit mt0">{{ nav.Country }}</div>
    <div class="input-box">
      <a-select
        ref="select"
        v-model:value="Country"
        style="width: 100%"
        :placeholder="nav.Country"
      >
        <a-select-option v-for="item in countryList" :key="item.id" :value="item.name">{{
          item.name
        }}</a-select-option>
      </a-select>
      <!-- <input class="input" v-model="Country" type="text" :placeholder="nav.Country" /> -->
    </div>
    <div class="other-box">
      <div class="mr">
        <div class="s-tit">{{ nav.City }}</div>
        <div class="input-box w140">
          <input class="input w140" v-model="City" type="text" :placeholder="nav.City" />
        </div>
      </div>
      <div class="mr">
        <div class="s-tit">{{ nav.Street }}</div>
        <div class="input-box">
          <input class="input" v-model="Street" type="text" :placeholder="nav.Street" />
        </div>
      </div>
      <div class="">
        <div class="s-tit">{{ nav.PCode }}</div>
        <div class="input-box w140">
          <input class="input w140" v-model="PCode" type="text" :placeholder="nav.PCode" />
        </div>
      </div>
      <div class="mr">
        <div class="s-tit">{{ nav.PhoneNumber }}</div>
        <div class="input-box">
          <input class="input" v-model="PhoneNumber" type="text" :placeholder="nav.PhoneNumber" />
        </div>
      </div>
    </div>
    <div class="save-btn">{{ btn.Preservation }}</div>
  </div>
</template>

<script lang="ts" setup>
import { language } from "~/conf";
const { nav, btn } = language;
type TCountry = {
  id: number;
  name: string;
  children: TCountry[];
};
let Country = ref(null);
let City = ref("");
let Street = ref("");
let PCode = ref("");
let PhoneNumber = ref("");
let countryList = ref<TCountry[]>([]);

const init = async () => {
  const { data } = await useServerFetch<TCountry[]>("/app-api/system/area/treeById", {
    query: {
      areaId: 0,
    },
  });
  countryList.value = data;
};
const getArea = async () => {
  const { data } = await useServerFetch("/app-api/member/address/get-default");
};
init();
getArea()
</script>

<style lang="stylus" scoped>

.p-title{
  font-weight: bold;
  font-size: 22px;
  margin-bottom 22px;
}
.s-tit{
  display:inline-block;
  font-size: 14px;
  margin-bottom:5px
  margin-top:25px
}
.input-box{
  position: relative;
  width 337px;
  .ant-select-single{
    .ant-select-selector {
      border-color: red; /* 将边框颜色设为红色，你可以替换为你想要的颜色 */
    }
  }

  .input{
    border 0
    width: 337px;
    height: 30px;
    line-height 30px;
    border-radius: 4px;
    border: 1px solid #666666;
    font-size 12px;
    padding 8px
    box-sizing: border-box;
    &:focus{
      outline 0
    }
  }
  .w140{
    width:140px
  }
}
.other-box{
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  flex-wrap:wrap;
  width 702px
  .p-mess{
    font-size: 11px;
    color: #333333;
    margin-top 10px
  }
  .mr{
    margin-right 28px
  }
}
.mt0{
  margin-top 0
}
.save-btn{
  width: 103px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #000000;
  border-radius: 4px;
  font-size: 12px;
  color: #FFFFFF;
  border: 1px solid #666666;
  margin-top 30px
}
.w140{
  width:140px
}
</style>
